<script setup lang="ts">
import { onMounted, ref } from "vue";
import "vue3-json-viewer/dist/index.css";
import { JsonViewer } from "vue3-json-viewer";
import { useRouter } from "vue-router";
import { getTransactionInfo } from "/@/api/api/transaction/transactionApi";
import { ElMessage } from "element-plus";
import TimeUtils from "/@/common/TimeUtils";

const router = useRouter();
const infoData = ref({});
const infoJson = ref({});
// 页面装载完成立刻执行
onMounted(() => {
  let id: any = router.currentRoute.value.query.id;
  getTransactionInfo(id)
    .then(res => {
      if (res.code === 0) {
        infoData.value = res.data;
        infoJson.value = JSON.parse(infoData.value["transactionJson"]);
      } else {
        ElMessage.info(res.msg);
      }
    })
    .catch(() => {
      ElMessage.info("查询失败");
    });
});
</script>

<template>
  <el-card class="show-info">
    <div class="title">交易详情</div>
    <el-divider />
    <div class="infoShow">
      <el-form
        ref="formRef"
        :model="infoData"
        label-position="left"
        label-width="150px"
      >
        <el-form-item label="交易ID：">
          {{ infoData.txId }}
        </el-form-item>
        <el-form-item label="区块高度：">
          {{ infoData.blockHeight }}
        </el-form-item>
        <el-form-item label="交易签名用户标签：">
          {{ infoData.signatureCreditCode }}
        </el-form-item>
        <el-form-item label="交易时间：">
          {{
            TimeUtils.dateFtt(
              "yyyy-MM-dd hh:mm:ss",
              new Date(infoData.createTime)
            )
          }}
        </el-form-item>
        <el-form-item label="交易数据详情：">
          <json-viewer
            :value="infoJson"
            copyable
            boxed
            sort
            :expandDepth="3"
            :expanded="true"
            theme="light"
          />
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<style lang="scss">
.el-form-item__content {
  line-height: 24px !important;
}

.el-form--label-left .el-form-item__label {
  color: #000 !important;
}

.jv-container {
  width: 100%;
}
</style>
<style lang="scss" scoped>
.show-info {
  min-height: 800px;
}

.infoShow {
  padding: 1%;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 1%;
}
</style>
